<div ng-init="isHoverOnMenuPop=false;isHoverOn=false;"
     ng-mouseenter="isHoverOn=true"
     ng-mouseleave="isHoverOn=false;!isHoverOnMenuPop && closeMenuPop()">
    <div class="pure-menu pure-menu-open pure-menu-horizontal" style="min-height: 38px">
        <ul ng-mouseleave="mouseLeave($event)">
            <li class="loading"
                style="width:36px; height:36px; background-position-x: 10px;background-position-y: 8px"
                ng-show="menuService.isLoadingMenus()&&menuService.getCurrentMenus().length==0"></li>
            <li role="menu"
                ng-repeat="menu in menuService.getCurrentMenus()"
                ng-class="{'pure-menu-selected':$index==menuService.hoveredMenu&&menu.subMenus.length>0}"
                ng-click="clickMenu(menu)"
                ng-mouseover="mouseOverMenu($event, $index)">
                <a style="cursor: pointer"
                   ng-href="{{menu.url}}"
                   onclick="return false;"
                   ng-class="{'hover-on-menu':menuService.hoveredMenu==$index&&menu.subMenus.length>0}">
                    {{menu.name}}</a>
            </li>
        </ul>
    </div>
    <div ng-if="getSubMenus().length>0"
         ng-mouseleave="isHoverOnMenuPop=false;!isHoverOn && closeMenuPop()"
         ng-mouseenter="isHoverOnMenuPop=true"
         ng-style="{top:menuPopTop+'px'}"
         class="menu-pop"
         style="left: 30px; right: 30px;">
        <ul ng-repeat="menu2 in getSubMenus()">
            <h2 ng-class="menu2.url?'enabled':'disabled'"
                ng-click="clickMenu(menu2)"
                menu-id="{{menu2.id}}">
                <div class="shortcutStatus" ng-click="clickShortcutStatus(menu2, $event)">
                    <span class="fa {{isInShortcuts(menu2.url)?'fa-star':'fa-star-o'}}" style="color: #f0ad4e"></span>
                </div>
                <a ng-href="{{menu2.url}}" onclick="return false;">{{menu2.name}}</a>
            </h2>
            <li ng-repeat="menu3 in menu2.subMenus"
                ng-class="menu3.url?'enabled':'disabled'"
                ng-click="clickMenu(menu3)"
                menu-id="{{menu3.id}}">
                <div class="shortcutStatus" ng-click="clickShortcutStatus(menu3, $event)">
                    <span class="fa {{isInShortcuts(menu3.url)?'fa-star':'fa-star-o'}}" style="color: #f0ad4e"></span>
                </div>
                <a ng-href="{{menu3.url}}" onclick="return false;">{{menu3.name}}</a>
            </li>
        </ul>
    </div>
</div>